<template>
    <el-row>
        <el-col>
            <el-form label-width="120px" :model="Device" ref="material_refs" :rules="frules">
                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="编号" prop="DeviceNumber">
                            <el-input v-model="Device.DeviceNumber" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="名称" prop="DeviceName">
                            <el-input v-model="Device.DeviceName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="一级分类" prop="DeviceCategoryIdOne">
                            <el-select style="width: 100%" value-key="Id" v-model="Device.DeviceCategoryIdOne" placeholder="请选择一级分类" @change="(obj)=>{ SetDeviceNumber(obj,'b') }" id="DeviceCategoryIdOne">
                                <el-option v-for="item in AllDeviceCategory" :key="item.Id" v-if="item.ParentId == 0" :value="item" :label="item.DeviceCategoryName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="二级分类" prop="DeviceCategoryIdTwo">
                            <el-select  style="width: 100%"  value-key="Id"  v-model="Device.DeviceCategoryIdTwo" placeholder="请选择二级分类" @change="(obj)=>{ SetDeviceNumber(obj,'c') }" id="DeviceCategoryIdTwo">
                                <el-option v-for="item in AllDeviceCategoryTwo" :key="item.Id"  :value="item" :label="item.DeviceCategoryName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="部门" prop="DepartmentId">
                            <el-select  style="width: 100%" value-key="Id"  placeholder="请选择部门" v-model="Device.DepartmentId" @change="(obj)=>{ SetDeviceNumber(obj,'a') }" id="selectDepartment">
                                <el-option v-for="v in AllDepartment" :key="v.Id" :value="v" :label="v.DepartmentName"></el-option>
<!--                                <el-option v-for="v in AllDepartment" :label="v.DepartmentName" :value="v.Id"></el-option>-->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="单位" prop="Unit">
                            <el-input v-model="Device.Unit"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="型号" prop="DeviceModel">
                            <el-input v-model="Device.DeviceModel"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="状态" prop="State">
                            <el-select placeholder="物资状态" style="width: 100%" v-model="Device.State">
                                <el-option v-for="v in AllDeviceState" :value="v.Type" :label="v.Name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="9" :offset="2">
                        <el-form-item label="单价" prop="Price">
                            <el-input v-model="Device.Price"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :offset="1" :span="9">
                        <el-form-item label="数量" prop="Amount">
                            <el-input v-model.number="Device.Amount"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="备注" prop="PurchaseCause">
                            <el-input v-model="Device.PurchaseCause"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="20" :offset="2">
                        <el-form-item label="图片上传">
                            <upload-file ref="upload_file_refs" style="display: inline-block;margin-right: 10px;display: block" content="图片选择" list_type="picture-card"  btnsize=""
                                         :another-data="AnotherData"  :showfilelist="true"  ></upload-file>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="30">
                    <el-col :span="12" style="text-align: right">
                        <el-button type="warning"  @click="AddNewMaterial_Warning">取消</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-button type="primary" @click="AddNewMaterial_event">添加物品</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
    </el-row>
</template>

<script>
    import { IsExist } from "/public/Scriput/IsExist"
    import * as publicjs from "/public/Scriput/Public"
    import UploadFile from "../UploadFile";

    export default {
        name: "AddNewMaterial",
        components: {
            'UploadFile': UploadFile
        },
        props: {
            //父组件处理的函数
            GetNewDevice: {
                type: Function,
                required: true,
            },
            AllDeviceCategory: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllDeviceState: {
                type: Array,
                required: true
            }
        },
        created() {
            IsExist.http(this.$http, this.$message)
            publicjs.http(this.$http, this.$message)
            if (this.AllDeviceState) {
                this.Device.State = this.AllDeviceState[0].Type
            }
        },
        data() {
            var demicalcheck=(rule, value, callback)=>{
                if (!value){
                    return callback(new Error('不能为空'));
                }else{
                    let pattern = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
                    if (pattern.test(value)) {
                        callback();
                    } else {
                        callback(new Error('必须数字'));
                    }
                }
            }
            return {
                Device: {
                    DeviceNumber: '',
                    DeviceCategoryIdOne: '',
                    DeviceCategoryIdTwo: '',
                    DeviceModel: '',
                    DeviceName: '',
                    ReferenceWebsite: '',
                    DepartmentId: '',
                    PurchaseCause: '',
                    Price: '',
                    PurchaseDate: new Date(),
                    State: '',
                    Pinyin: '',
                    Amount: 0,
                    TotalPrice: 0,
                    Unit: '',
                    StockAmount: 0,
                    StockPrice: 0,
                    DamageAmount: 0,
                    DamagePrice: 0,
                    ConsumeAmount: 0,
                    ConsumePrice: 0,
                    imgUrl: '',
                    OperatId: 0,
                    OperatDate: new Date(),
                    Delete: false,
                },
                codes: {
                    a: '',
                    b: '',
                    c: '',
                },
                //文件上传参数
                AnotherData: {
                    FileType: 2048,
                    id: 0,
                    Type: 0,
                    Single: true,
                },
                AllDeviceCategoryTwo:[],
                //表格认认证
                frules:{
                    DeviceNumber:[ { required: true, message: '编号不可为空', trigger: 'blur' },],
                    Amount:[{ required: true, message: '顺良必须为数字', trigger: 'blur' }],
                    Price:[ { validator: demicalcheck, trigger: 'blur' }],
                    DeviceName:[ { required: true, message: '请输入物资名称', trigger: 'blur' }],
                    DeviceCategoryIdOne:[  { required: true, message: '请选择一级分类', trigger: 'change' }],
                    DeviceCategoryIdTwo:[  { required: true, message: '请选择一级分类', trigger: 'change' }],
                    DepartmentId:[  { required: true, message: '请选择部门', trigger: 'change' }],
                    Unit:[ { required: true, message: '请输入物资单位', trigger: 'blur' } ],
                    DeviceModel:[ { required: true, message: '请输入物资单位', trigger: 'blur' } ],
                    State:[ { required: true, message: '请输入物资状态', trigger: 'change' } ],
                }
            }
        },
        methods: {
            //表格数据重置
            Fromreset() {
                this.$refs['material_refs'].resetFields()
            },
            //自动生成编号
            SetDeviceNumber(val, type) {
                switch (type) {
                    case 'a':
                        this.codes.a = val.Code
                        break;
                    case 'b':
                        this.codes.b = val.Code
                        this.AllDeviceCategoryTwo = this.AllDeviceCategory.filter(x=>x.ParentId==val.Id)
                        break;
                    case 'c':
                        this.codes.c = val.Code
                        break;
                }
                publicjs.SetDeviceNumber(this.Device, null, this.codes)
            },
            //构件全新的数量为0的物资
            AddNewMaterial_event() {
                this.$refs.material_refs.validate(async valid=>{
                    if (valid){
                        this.Device.TotalPrice = this.Device.Amount * this.Device.Price;
                        let newDevice = JSON.parse(JSON.stringify(this.Device))
                        let result = await IsExist.IsExistDeviceNumber(this.Device.DeviceNumber)
                        if (!result.data) {
                            newDevice.DepartmentId = newDevice.DepartmentId.Id
                            newDevice.DeviceCategoryIdOne = newDevice.DeviceCategoryIdOne.Id
                            newDevice.DeviceCategoryIdTwo = newDevice.DeviceCategoryIdTwo.Id
                            let loadding = this.openLoading();
                            this.$http.post('Device/AddNewDeviceContent', newDevice).then(res => {
                                loadding.close();
                                if (res.data.msg.IsSuccess) {
                                    this.$message.success('添加成功!')
                                    this.GetNewDevice(res.data.data)
                                    this.Fromreset()
                                    this.AnotherData.id = parseInt(res.data.msg.Msg)
                                    //文件上传
                                    if (this.$refs['upload_file_refs'].fileList.length > 0) {
                                        this.$refs['upload_file_refs'].submitUpload()
                                    }
                                } else {
                                    this.$message.warning('添加失败,请重试!')
                                }
                            })
                        } else {
                            this.$message.info('该编号已被使用，即将生成新编号')
                            publicjs.SetDeviceNumber(this.Device)
                        }
                    }
                })
            },
            // 取消弹框
            AddNewMaterial_Warning(){
                this.$parent.$parent.AddNewMaterial_dialog = false;
            },
        },
    }
</script>

<style scoped>

</style>
